import { ExampleContainer, ExampleRoot } from '@compiled/website-ui';
import { LargeText } from '../components/example';

## Performant, comfortable CSS-in-JS

Using **APIs and behavior you may already be familiar with**,
write your styles in JavaScript with the **full power of CSS** —
leveraging the language to create expressive and dynamic experiences.

This requires [some installation](./docs/installation) to work, head over to the documentation to get started.

For a peek under the hood, see [how it works](./docs/how-it-works).

1. Basic usage:

```jsx
/** @jsxImportSource @compiled/react */
import { css } from '@compiled/react';

const largeTextStyles = css({ fontSize: '48px', padding: '8px', background: '#eee' });
const invertedStyles = css({ background: '#333', color: '#fff' });

export const LargeText = ({ inverted, children }) => {
  return <span css={[largeTextStyles, inverted && invertedStyles]}>{children}</span>;
};
```

```jsx
<LargeText>Hello</LargeText>
<LargeText inverted>world</LargeText>
```

2. Would render as:

<LargeText>Hello</LargeText>
<LargeText inverted>world</LargeText>
